<template>
    <div class="singerDetails">
        <div class="works" v-show="type=='热门作品'">
           <div class="list-title">歌曲列表<span>{{artists.length}}首</span></div>
            <div class="musicList" v-for="(item,i) in artists" :key="i" @click="setplay(item)">
               <div class="index">{{i+1}}</div>
               <div class="music">{{item.name}}</div>
               <div class="name" ><span v-for="(time,k) in item.ar" :key="k">{{time.name}}</span></div>
               <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang3"></use>
               </svg>
            </div>
        </div>
        <div class="album" v-show="type=='所有专辑'">
          <router-link :to="{path:'/specialAlbum',query:{id:item.id}}" class="albums" v-for="(item,i) in album" :key="i">
            <img :src="item.blurPicUrl" alt="">
            <div class="title">
              <div class="name">{{item.name}}</div>
              <div class="time">{{publishTime(item.publishTime)}}</div>
            </div>
          </router-link>
        </div>
        <div class="mv" v-show="type=='相关MV'">
          <router-link :to="{path:'/mvList',query:{id:item.id,name:item.name}}" class="mvs" v-for="(item,i) in mv" :key="i">
            <p>
              <img :src="item.imgurl16v9" alt="">
              <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang3"></use>
              </svg>
            </p>
            <div class="title">
              <div class="name">{{item.name}}</div>
            </div>
          </router-link>
        </div>
        <div class="actor" v-show="type==='艺人介绍'">
            <ul v-for="(item,i) in desc" :key="i" >
                {{item.ti}} :<br/>
                <div>
                    <li v-for="(time,k) in values(item.txt)" :key="k">{{time}}</li>
                </div>
            </ul>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: ['desc', 'album', 'artists', 'mv'],
  data () {
    return {
      is: false
    }
  },
  computed: {
    ...mapState(['type'])
  },
  methods: {
    values (num) {
      const value = num.split('\n')
      return value
    },
    publishTime (num) {
      const date = new Date(num)
      const y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + MM + '-' + d
    },
    setplay (item) {
      console.log(item)
      this.$store.commit('pushPlaylist', item)
      this.$store.commit('setPlayIndex', this.$store.state.playlist.length - 1)
    }
  }

}
</script>
<style lang="less" scoped>
.singerDetails{
  width: 7.5rem;
  .album{
  width: 7.1rem;
  height: 7rem;
  overflow:scroll;
  margin: 0 auto;
  .albums{
    display: flex;
    margin: 0.2rem 0;
     img{
    width: 2.5rem;
    height: 2.5rem;
    }
    .title{
    margin: 0 auto;
      .name{
      margin: 0.2rem 0;
      font-weight: 900;
      }
      .time{
      color: #ccc;
      }
    }
  }
}
.actor{
    width: 7.1rem;
    height: 6.9rem;
    margin: 0.2rem auto;
    overflow:scroll;
    ul{
        font-size: 0.45rem;
        font-weight: 900;
        li{
            text-indent: 2em;
            font-size: 0.3rem;
            color: #333;
            list-style: none;
        }
    }
}
.works{
        width: 7.1rem;
        margin: 0.2rem auto;
        height: 6.8rem;
        overflow:scroll;
        .list-title{
            font-size: 0.4rem;
            font-weight: 900;
            span{
                font-size: 0.25rem;
                color: #ccc;
                margin-left: 0.2rem;
            }
        }
        .musicList{
            display:flex;
            align-items: center;
            line-height: 0.8rem;
            border: 1px solid #ccc;
            padding: 0 0.2rem;
            font-size: 0.3rem;
            margin-top: 0.1rem;

            .index{
                width: 0.5rem;
            }
            .music{
                width: 3.5rem;
            }
            .name{
                width: 1.2rem;
            }
            .name,.music{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                margin-right:0.2rem;
            }
            .icon{
                width: 0.4rem;
                height: 0.4rem;
                margin-left: 0.5rem;
            }

    }
}

.mv{
  width: 7.1rem;
  height: 7rem;
  overflow:scroll;
  margin: 0 auto;
  .mvs{
    display: flex;
    margin: 0.2rem 0;
    p{
      width: 2.5rem;
      height: 2.5rem;
      position: relative;
       img{
          width: 2.5rem;
          height: 2.5rem;
      }
      .icon{
        width: 0.8rem;
        height: 0.8rem;
        position:absolute;
        left:33%;
        top: 33%;
        fill: #ccc;
      }
    }
    .title{
      margin: 0 auto;
      width: 2.5rem;
      .name{
        margin: 0.2rem 0;
        font-weight: 900;
      }
    }

  }
  }
}
</style>
